<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/icons/logo.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Chrome Extension + Alpine + JS + Vite</title>
    <style>
      :root {
        font-family:
          system-ui,
          -apple-system,
          BlinkMacSystemFont,
          'Segoe UI',
          Roboto,
          Oxygen,
          Ubuntu,
          Cantarell,
          'Open Sans',
          'Helvetica Neue',
          sans-serif;

        color-scheme: light dark;
        background-color: #242424;
      }

      @media (prefers-color-scheme: light) {
        :root {
          background-color: #fafafa;
        }
      }

      body {
        min-width: 20rem;
        margin: 0;
      }

      section::before {
        content: '';
        position: fixed;
        z-index: -1;
        width: 100vw;
        height: 100vh;
        background-image: url('https://source.unsplash.com/random');
        background-size: cover;
        filter: blur(10px);
      }

      section {
        width: 100vw;
        height: 100vh;

        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
      }

      h1 {
        color: #48a9c1;
        text-transform: uppercase;
        font-size: 6rem;
        margin: 2rem auto;
      }

      a {
        font-size: 0.5rem;
        margin: 0.5rem;
        color: #cccccc;
        text-decoration: none;
      }
    </style>
  </head>
  <body>
    <section x-data="newtab">
      <span></span>
      <h1 x-text="time">00:00</h1>
      <a href="https://github.com/guocaoyi/create-chrome-ext" target="_blank">
        generated by create-chrome-ext
      </a>
    </section>
    <script type="module" src="/src/newtab/index.js"></script>
  </body>
</html>
